<script setup lang="ts">
import { useRoute } from 'vue-router'
import { defineAsyncComponent,computed } from 'vue'
const route = useRoute()
const functionId = computed(() => route.params.id as string)

/* 1. 映射表：值必须是“异步组件”而不是“返回 Promise 的函数” */
const functionComponents: Record<string, ReturnType<typeof defineAsyncComponent>> = {
  'drag-drop': defineAsyncComponent(() => import('@/view/function/content/drag-dropFunc.vue')),
  'calculator': defineAsyncComponent(() => import('@/view/function/content/calculatorFunc.vue')),
}
/* 2. 直接取即可，拿到的已经是组件 */
const currentComponent = computed(() => functionComponents[functionId.value] || null)
</script>

<template>
    <div class="min-h-screen bg-gray-50 py-8 mt-12">
    <div class="max-w-4xl mx-auto px-4">
      <!-- 返回按钮 -->
      
      <!-- 动态加载功能组件 -->
      <component 
        :is="currentComponent" 
        v-if="currentComponent"
        class="bg-white rounded-lg shadow-lg p-6"
      />
       
      <!-- 功能不存在时的提示 -->
      <div v-else class="bg-white rounded-lg shadow-lg p-6 text-center">
        <p class="text-xl text-gray-600">功能不存在</p>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>
